<template>
  <form @submit.prevent="handleSubmit" class="space-y-4">
    <!-- 任务名称 -->
    <div>
      <label for="taskTitle" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">任务名称</label>
      <input
        type="text"
        id="taskTitle"
        v-model="taskTitle"
        placeholder="输入任务内容..."
        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
        required
      >
    </div>
    
    <!-- 标签 -->
    <div>
      <label for="taskTags" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">标签 (用逗号分隔)</label>
      <input
        type="text"
        id="taskTags"
        v-model="taskTags"
        placeholder="工作,学习,生活..."
        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
      >
    </div>
    
    <!-- 优先级 -->
    <div>
      <label for="taskPriority" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">优先级</label>
      <select
        id="taskPriority"
        v-model="taskPriority"
        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
      >
        <option value="high">高</option>
        <option value="medium">中</option>
        <option value="low">低</option>
      </select>
    </div>
    
    <!-- 截止日期 -->
    <div>
      <label for="dueDate" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">截止日期</label>
      <input
        type="date"
        id="dueDate"
        v-model="dueDate"
        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
      >
    </div>
    
    <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md">添加任务</button>
  </form>
</template>

<script setup>
import { ref } from 'vue';

const taskTitle = ref('');
const taskTags = ref('');
const taskPriority = ref('medium');
const dueDate = ref('');
const emits = defineEmits(['task-added']);

const handleSubmit = () => {
  const tags = taskTags.value.split(',').map(tag => tag.trim()).filter(tag => tag);
  
  const newTask = {
    id: Date.now().toString(),
    title: taskTitle.value.trim(),
    tags: tags,
    priority: taskPriority.value,
    dueDate: dueDate.value,
    completed: false,
    createdAt: new Date().toISOString()
  };
  
  // 发送任务添加事件
  emits('task-added', newTask);
  
  // 重置表单
  taskTitle.value = '';
  taskTags.value = '';
  taskPriority.value = 'medium';
  dueDate.value = '';
};
</script>

<style scoped>
/* 添加一些基本样式 */
button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

button[type="submit"]:active {
  transform: translateY(0);
}
</style>